<template>
	<view>
		<!-- 模糊背景 -->
		<view class="topic-bg">
			<image :src="item.titlepic" mode="widthFix" lazy-load></image>
		</view>
		<!-- 话题信息 -->
		<view class="topic-info">
			<view class="topic-info-top d-flex">
				<image src="../../static/image/topicpic/13.jpeg" mode="widthFix" lazy-load></image>
				<view class="flex-1">#{{item.title}}#</view>
			</view>
			<view class="topic-info-center d-flex">
				<view class="">动态 {{item.totalnum}}</view>
				<view class="">今日 {{item.todaynum}}</view>
			</view>
			<view class="topic-info-bottom">{{item.desc}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topic-bg {
		width: 100%;
		height: 300upx;
		position: relative;
		overflow: hidden;

		image {
			width: 100%;
			position: absolute;
			filter: blur(10px);
		}
	}

	.topic-info {
		padding: 0 20upx;

		.topic-info-top {
			position: relative;

			image {
				width: 150upx;
				height: 150upx;
				border-radius: 30upx;
				position: absolute;
				top: -75upx;
			}

			view {
				font-size: 35upx;
				margin-left: 170upx;
				color: #333333;
				font-weight: bold;
			}
		}

		.topic-info-center {
			padding: 20upx 0 10upx 0;

			view {
				color: #CDCDCD;

			}
		}

		.topic-info-bottom {
			color: #A3A3A3;
			font-size: 32upx;
		}
	}
</style>
